<template>
    <div class="page-content">
        <entity-manager apiPrefix="/manager/device-simulation" :fields="fields" :queryFields="queryFields" ref="entityManagerRef"
            class="flex-auto" :params="params" :withNew="false" operationsWidth="200px">
            <template #buttons>
                <el-button type="primary" icon="plus" @click="newItem">新增</el-button>
            </template>

            <template #rowButtons="{ row }">
                <el-link type="danger" v-show="!!row.status" class="mr-2" @click="stop(row)" v-perm="'update'">停止</el-link>
                <el-link type="danger" v-show="!!row.status" class="mr-2" @click="restart(row)" v-perm="'update'">重启</el-link>
                <el-link type="success" v-show="!row.status" class="mr-2" @click="start(row)" v-perm="'update'">启动</el-link>
                <el-link type="primary" v-show="!row.isSuperAdmin" @click="goEdit(row)" class="mr-2" v-perm="'update'">详情</el-link>
                <el-link type="danger" v-show="!row.isSuperAdmin" @click="doDelete(row)" class="mr-2" v-perm="'delete'">删除</el-link>
            </template>
        </entity-manager>

        <full-panel v-model="visible" title="模拟设备详情" @close="visible = false" v-if="visible">
            <new-model @close="visible = false" :item="editingRow" @change="editChanged" />
        </full-panel>
    </div>
</template>

<script setup>
    import { ElMessage } from 'element-plus';
    import fullPanel from '@/components/full-panel.vue'
    import newModel from './new.vue'
    import * as _ from 'lodash'
    import https from '@/utils/https'

    const fields = [
        { label: '设备编码', prop: 'deviceCode', required: true },
        { label: '设备名称', prop: 'deviceName', required: true },
        { label: '网关编码', prop: 'gatewayCode' },
        {
            label: '状态', prop: 'status', width: '80px', converter: val => {
                if (!val) {
                    return '停止'
                } else if (val == 1) {
                    return '运行中'
                }
            },
            needNew: false
        },
        { label: '上数间隔(S)', prop: 'interval', width: '140px', align: 'center' },
        { label: '创建时间', prop: 'createTime', width: '200px', needNew: false },
    ]
    const entityManagerRef = ref()
    const params = ref({})
    const queryFields = [
        { label: '关键字', prop: 'key' },
    ]
    const visible = ref(false)
    const editingRow = ref()

    function goEdit(row) {
        editingRow.value = row
        visible.value = true
    }

    function doDelete(row) {
        entityManagerRef.value.doDelete(row)
    }

    function editChanged() {
        entityManagerRef.value.reload()
    }

    function start(row) {
        https.get('/manager/device-simulation/start', { deviceCode: row.deviceCode }).then(resp => {
            ElMessage.success('操作成功')
            row.status = 1
        })
    }

    function stop(row, showMsg = true) {
        return https.get('/manager/device-simulation/stop', { deviceCode: row.deviceCode }).then(resp => {
            showMsg && ElMessage.success('操作成功')
            row.status = 0
        })
    }

    function restart(row) {
        stop(row, false).then(() => start(row));
    }

    function newItem() {
        visible.value = true
    }
</script>

<style lang="scss" scoped>
    .tree {
        width: 300px;
        height: calc(100vh - 120px)
    }
</style>